<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由学习-命名视图</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Named Views</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>
            </li>
            <li>
                <router-link to="/other">/other</router-link>
            </li>
        </ul>
        <router-view class="view one"></router-view>
        <router-view class="view two" name="a"></router-view>
        <router-view class="view three" name="b"></router-view>
    </div>


</body>
<script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    const Baz = { template: '<div>baz</div>' }

    const router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/',
                components: {
                    default: Foo,
                    a: Bar,
                    b: Baz
                }
            },
            {
                path: '/other',
                components: {
                    default: Baz,
                    a: Bar,
                    b: Foo
                }
            }
        ]
    })

    new Vue({
        router,
        el: '#app'
    })
</script>
</html>